<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" :theme="theme" autoresize />
  </div>
</template>
<script>

export default {
  name: 'chart',
  props: ['getDetail'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'svg' },
      theme: 'default'
    }
  },
  methods: {
  },
  computed: {
    getOptions () {
      var options = []
      var obj = JSON.parse(JSON.stringify(this.getDetail.sheetData))
      var head = obj.shift()
      for (let i = 1, nc = this.getDetail.nc; i < nc; i++) {
        options.push({
          series: {
            type: 'map',
            map: 'china',
            label: {
              show: true
            },
            roam: this.getDetail.dtMap.roam,
            left: this.getDetail.dtMap.left,
            right: this.getDetail.dtMap.right,
            bottom: this.getDetail.dtMap.bottom,
            top: this.getDetail.dtMap.top,
            itemStyle: this.getDetail.dtMap.itemStyle,
            data: obj.map(item => {
              return { name: item[0], value: item[i] }
            })
          },
          title: {
            text: head[i] + this.getDetail.dtMap.baseTitle
          }
        })
      }
      return options
    },
    option () {
      return {
        baseOption: {
          animation: this.getDetail.animation,
          title: this.getDetail.title,
          backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option],
          timeline: {
            data: this.getDetail.sheetData[0].slice(1),
            axisType: this.getDetail.timeline.axisType,
            orient: this.getDetail.timeline.orient,
            left: this.getDetail.timeline.left,
            right: this.getDetail.timeline.right,
            top: this.getDetail.timeline.top,
            bottom: this.getDetail.timeline.bottom,
            show: this.getDetail.timeline.show,
            autoPlay: this.getDetail.timeline.autoPlay,
            inverse: this.getDetail.timeline.inverse,
            rewind: this.getDetail.timeline.rewind,
            loop: this.getDetail.timeline.loop,
            playInterval: this.getDetail.timeline.playInterval,
            realtime: true,
            controlPosition: this.getDetail.timeline.controlPosition,
            symbol: this.getDetail.timeline.symbol,
            symbolSize: this.getDetail.timeline.symbolSize,
            lineStyle: this.getDetail.timeline.lineStyle,
            controlStyle: this.getDetail.timeline.controlStyle
          },
          tooltip: {
            formatter: '{b}: {c}'
          },
          visualMap: this.getDetail.visualMapC
        },
        options: this.getOptions
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
<style>

</style>
